<html>
<head>
    <title>分类管理</title>
    <link href="/lib//layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
<input id="addBtn" type="button" value="新增一级分类" class="layui-btn">
<input id="searchBtn" type="button" style="display: none" value="查询" class="layui-btn">

<table id="table1"></table>


<script src="/lib/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script id="template1" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">
        <div class="layui-form-item" style="margin-top:15px">
            <div class="layui-inline">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="id"/>
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <input type="hidden" name="parentId" id="parentId" autocomplete="off" class="layui-input">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-inline layui-input-wrap">

                    <input type="text" name="sequence" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="reset" value="重置" class="layui-btn layui-btn-primary">
                <input type="button" id="saveBtn" value="保存" class="layui-btn">
            </div>
        </div>
    </form>
</script>
<script id="template2" type="text/html">
    <input lay-event="add" type="button" value="加下级" class="layui-btn layui-btn-xs">
    <input lay-event="edit" type="button" value="编辑" class="layui-btn layui-btn-xs">
    {{# if(d.children==null || d.children.length==0){ }}<!--有子菜单就不显示删除按钮-->
    <input lay-event="delete" type="button" value="删除" class="layui-btn layui-btn-xs layui-bg-red">
    {{# }  }}
</script>
<script th:inline="none">
    layui.use(["layer", "form", "treeTable", "table"], function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var treeTable = layui.treeTable;
        var table = layui.table;

        $("#searchBtn").on("click", function () {
            treeTable.render({
                elem: "#table1",//渲染谁
                cols: [[//表列显示的
                    {title: "序号", type: "numbers", maxwidth: "100px"},
                    {title: "商品分类名称", field: "name"},
                    {title: "排序", field: "sequence"},
                    {title: "状态", field: "status"},
                    {title: "操作", templet: "#template2"},
                ]],
                url: "/category/tree",
                tree: {
                    view: {
                        showIcon: false
                    }
                }
            });
        }).click();

        $("#addBtn").on("click", function () {
            layer.open({
                type: 1,
                title: "新增商品分类",
                area: ["400px", "400px"],
                content: $("#template1").html()
            })
            $("#parentId").val(0);
        })

        $("body").on("click", "#saveBtn", function () {
            var data = form.val("form1")
            if (!data.name) {
                layer.msg("商品分类名不能为空！")
                return false;
            }


            $.post("/category/save", data, function () {//利用ajax传请求
                layer.closeAll();
                $("#searchBtn").click();
            })
        });

        //给表格操作绑事件
        table.on("tool", function (obj) {
            var event = obj.event;
            var data = obj.data;
            if (event === "edit") {//说明点了编辑
                $.get("/category/info/" + data.id, function (category) {
                    layer.open({
                        title: "编辑商品分类",
                        type: 1,
                        area: ['400px', '400px'],
                        content: $("#template1").html()
                    });
                    //把对象放进form中
                    form.val("form1", category);
                })
            }
            if (event === "delete") {
                layer.confirm("您确定要删除这个分类吗?", function () {
                    //  menu/delete/3 restful风格
                    $.post("/category/delete/" + data.id, function () {
                        layer.closeAll();
                        $("#searchBtn").click();
                    })
                }, function () {
                })
            }
            if (event === "add") {
                layer.open({
                    type: 1,
                    title: "新增下级分类",
                    area: ["400px", "400px"],
                    content: $("#template1").html()
                })
                $("#parentId").val(data.id);
            }
        })

    })
</script>
</body>
</html>
